<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt pt10">
      <template>
        <div v-if="exhibitionList">
          <Form ref="formValidate" :label-width="120">
            <FormItem label="">
              <Grid :col="5">
                <GridItem>{{ $t('page.supplier.space') }}</GridItem>
                <GridItem>{{ $t('page.order.location') }}</GridItem>
                <GridItem>{{ $t('page.supplier.booth_number') }}</GridItem>
                <GridItem>{{ $t('page.supplier.size') }}</GridItem>
                <GridItem>{{ $t('page.supplier.rent') }}</GridItem>
                <GridItem>{{ exhibitionList.area }} {{ $t('page.supplier.sqm') }}</GridItem>
                <GridItem>{{ exhibitionList.name }}</GridItem>
                <GridItem>{{ exhibitionList.store_warehouse_exhibition_id }}</GridItem>
                <GridItem>{{ exhibitionList.size }}</GridItem>
                <GridItem>{{ exhibitionList.price }}{{ $t('page.supplier.one_moth') }}</GridItem>
              </Grid>
            </FormItem>
            <FormItem :label="$t('page.supplier.Layout') + ':'">
              <p>
                <Upload :action="fileUrl" :headers="header" :format="fileFormat" :max-size="5 * 1024" :multiple="true"
                  :on-success="handleSuccess">
                  <Button icon="ios-cloud-upload-outline">{{ $t('page.supplier.upload') }} {{ $t('page.supplier.file')
                    }}</Button>
                </Upload>
                <el-image v-if="exhibitionList.file_url" style="width: 50px; height: 50px"
                  :src="exhibitionList.file_url" :preview-src-list="urlList" :z-index="1"></el-image>
              </p>
            </FormItem>
            <FormItem :label="$t('page.supplier.arrangement') +$t('page.stock.completed')+ ':'">
              <img v-for="value in exhibitionList.layout_file_url" :src="value" alt="">
            </FormItem>
          </Form>
        </div>
        <el-result v-else icon="warning" :title="$t('sliderMenu.not_showroom')" subTitle="请联系客服经理">
          <template slot="extra">
            <el-button type="primary" size="medium">返回</el-button>
          </template>
        </el-result>
      </template>
    </Card>
  </div>
</template>

<script>
import {
  supplier,
  putSupplier,
  cityApi,
  supplierAgreementList,
  supplierWarehouseExhibition,
  putSupplierExhibition
} from "@/api/setting";
import { mapMutations } from "vuex";
import Setting from "@/setting";
import util from "@/libs/util";
export default {
  name: 'index',
  components: {},
  data() {
    return {
      fileUrl: Setting.apiBaseURL + "/file/upload",
      fileFormat:['png','jpg','jpeg'],
      header: {},
      formValidate: {
        supplier_name: '',
        name: '',
        email: '',
        phone: '',
        detailed_address: '',
        province: 0,
        city: 0,
        area: 0,
        street: 0,
        addressSelect: [],
        address: ''
      },
      exhibitionList: {},
      urlList: [],
      addresData: [],
      ruleValidate: {
        supplier_name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
        ]
      }
    }
  },
  created() {
    this.getInfo();
    this.getSupplierExhibitionList();
    this.getToken();
  },
  mounted() {
    this.setCopyrightShow({ value: false });
  },
  destroyed() {
    this.setCopyrightShow({ value: true });
  },
  methods: {
    ...mapMutations('store/layout', [
      'setCopyrightShow'
    ]),
    getToken() {
      this.header["Authori-zation"] = "Bearer " + util.cookies.get("token");
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      if (res.code === 0) {
        this.exhibitionList.file_url = res.data.src;
        this.urlList.push(this.exhibitionList.file_url)
        putSupplierExhibition({ relation_id: this.exhibitionList.relation_id, file_url: this.exhibitionList.file_url }).then(res => {
          this.$Message.success(res.msg)
        }).catch(err => {
          this.$Message.error(err.msg)
        })

      } else {
        this.$Message.error(res.msg);
      }
    },
    getInfo() {
      supplier().then(res => {
        this.formValidate = res.data.info;
      }).catch(err => {
        this.$Message.error(err.msg);
      })
    },
    getSupplierExhibitionList() {
      supplierWarehouseExhibition().then(res => {
        this.exhibitionList = res.data.info;
      }).catch(err => {
        this.$Message.error(err.msg);
      })
    },


    handleSubmit(name) {
      if (this.formValidate.email !== '') {
        if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/i.test(this.formValidate.email)) {
          return this.$Message.error('请输入正确的供应商邮箱')
        }
      }
      this.$refs[name].validate((valid) => {
        if (valid) {
          putSupplier(this.formValidate).then(res => {
            this.$Message.success(res.msg)
          }).catch(err => {
            this.$Message.error(err.msg)
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.input {
  max-width: 460px;
}

.fixed-card {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 200px;
  z-index: 10;
  box-shadow: 0 -1px 2px rgb(240, 240, 240);

  /deep/ .ivu-card-body {
    padding: 15px 16px 14px;
  }

  .ivu-form-item {
    margin-bottom: 0;
  }

  /deep/ .ivu-form-item-content {
    margin-right: 124px;
    text-align: center;
  }

  .ivu-btn {
    height: 36px;
    padding: 0 20px;
  } }
</style>
